<template>
    <view class="not-find-photos">
        <image src="@/pages/indexPages/static/searchResults/notFound.png" mode="" class="noresultImg"></image>
        <view class="tips" v-if="enterTimes === 1">
            <view class="noimgTip1">非常抱歉，未检测到您的照片</view>
            <view class="noimgTip1">您可以按照下方操作建议再试一次</view>
            <view class="steps">
                <image src="@/pages/indexPages/static/searchResults/step0.png" mode=""></image>
                <image src="@/pages/indexPages/static/searchResults/step1.png" mode=""></image>
                <image src="@/pages/indexPages/static/searchResults/step2.png" mode=""></image>
            </view>
            <view class="btn" @click="tryAgain">点我重试</view>
        </view>
        <view class="tips" v-else>
            <view class="noimgTip2">非常抱歉，未检测到您的照片</view>
            <view class="noimgTip2">您还可以这样做：</view>
            <view class="reasons">
                <view class="">·邀请和您一起出游的朋友试试</view>
                <view class="">·也可能是网络延迟，晚点再试</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'NotFindPhotos',
    data() {
        return {};
    },
    props: {
        enterTimes: {
            type: Number,
            default: 1
        }
    },
    computed: {},
    mounted() {},
    created() {},
    methods: {
        tryAgain() {
            uni.navigateBack({
                delta: 1
            });
        }
    },
    components: {}
};
</script>
<style lang="less" scoped="scoped">
.not-find-photos {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .noresultImg {
        width: 554rpx;
        height: 382rpx;
        margin: 100rpx 98rpx 60rpx;
    }
    .noimgTip1 {
        width: 100%;
        text-align: center;
        color: #abb3b8;
        line-height: 48rpx;
        font-size: 30rpx;
    }
    .steps {
        margin-top: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        image {
            width: 150rpx;
            height: 205rpx;
        }
    }
    .noimgTip2 {
        text-align: left;
        line-height: 48rpx;
        font-size: 30rpx;
        color: #abb3b8;
        margin-left: 178rpx;
    }
    .reasons {
        margin-left: 178rpx;
        line-height: 48rpx;
        font-size: 30rpx;
        color: #262832;
    }
    .btn {
        margin: 97rpx auto;
        width: 600rpx;
        height: 86rpx;
        background-image: linear-gradient(45deg, #47c649 0%, #5ad25c 100%), linear-gradient(#0ac26b, #0ac26b);
        border-radius: 10rpx;
        color: #ffffff;
        font-size: 30rpx;
        line-height: 86rpx;
        text-align: center;
    }
}
</style>
